<template>
  <div class="main">
    <div class="header">
      <div class="static">
        <div
          @click="
            current = index;
            getStaticInfo(item.name);
          "
          v-for="(item, index) in staticOrder"
          :key="index"
          :class="{ active: current == index ? true : false }"
        >
          {{ item.name }}({{ item.num }})
        </div>
      </div>
      <el-form
        :inline="true"
        :label-position="'right'"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="订单编号">
                <el-input
                  v-model="formInline.orderNum"
                  placeholder="订单编号"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <el-form-item label="订单类型">
                <el-select
                  v-model="formInline.pickupInstore"
                  placeholder="活动区域"
                >
                  <el-option label="配送" value="1"></el-option>
                  <el-option label="自提" value="0"></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="下单时间">
                <el-input
                  v-model="formInline.createStart"
                  placeholder="下单时间"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="所属门店">
                <el-input
                  v-model="formInline.shoppingAdd"
                  placeholder="所属门店"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="收货人">
                <el-input
                  v-model="formInline.consignee"
                  placeholder="收货人"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="订单状态">
                <el-input
                  v-model="formInline.status"
                  placeholder="订单状态"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="收货人">
                <el-input
                  v-model="formInline.consignee"
                  placeholder="收货人"
                ></el-input>
              </el-form-item></div
          ></el-col>

          <el-col :span="6">
            <el-form-item>
              <el-button @click="onSubmit">查询</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="content">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="OrderNum" label="订单编号" width="120">
        </el-table-column>
        <el-table-column prop="pickupInstore" label="订单类型" width="120">
          <template slot-scope="scope">
            <p style="padding-left: 10px">
              {{ scope.row.pickupInstore == 0 ? "自提" : "配送" }}
            </p>
          </template>
        </el-table-column>

        <el-table-column prop="createAt" label="下单时间" show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="shoppingAdd"
          label="所属门店"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column prop="status" label="订单状态" show-overflow-tooltip>
          
        </el-table-column>

        <el-table-column prop="note" label="备注" show-overflow-tooltip>
          <template slot-scope="scope">
            <p v-if="scope.row.note">{{ scope.row.note }}</p>
            <p v-else>-</p>
          </template>
        </el-table-column>

        <el-table-column prop="consignee" label="收货人" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <router-link :to="'/grzx/grzx/myorder/' + scope.row.OrderNum"
              >查看订单</router-link
            ><br />
            <span style="cursor:pointer" @click="form.id=scope.row.id;dialogFormVisible = true">修改订单</span>
            <!-- 模态框 -->
            <el-dialog title="修改订单" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="商品ID" :label-width="formLabelWidth">
                  <el-input v-model="form.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="商品备注" :label-width="formLabelWidth">
                  <el-input v-model="form.note" ></el-input>
                </el-form-item>
                <el-form-item label="订单状态" :label-width="formLabelWidth">
                  <el-select v-model="form.status" placeholder="请选择商品状态">
                    <el-option label="" value=""></el-option>
                    <el-option label="待付款" value="待付款"></el-option>
                    <el-option label="待发货" value="待发货"></el-option>
                    <el-option label="待收款" value="待收款"></el-option>
                    <el-option label="已完成" value="已完成"></el-option>
                    <el-option label="待退款" value="待退款"></el-option>
                    <el-option label="已退款" value="已退款"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button @click="updateOrder(form)">确 定</el-button>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          @current-change="currentChange"
          layout="prev, pager, next"
          :total="totalCurrent"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { GetOrder, GetStaticOrder,UpdateOrder } from "@/api/user.js";
export default {
  created() {
    this.getOrder({});
    // 静态order
    GetStaticOrder().then((res) => {
      console.log(res);
      this.staticOrder = res.data.list;
    });
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {
        id: "",
        note: "",
        status: "",
      },
      formLabelWidth: "120px",
      current: 0,
      // 查询条件
      formInline: {
        orderNum: "",
        pickupInstore: "",
        createStart: "",
        shoppingAdd: "",
        status: "",
        consignee: "",
      },
      baseInfo: [
        {
          name: "订单编号",
        },
      ],
      staticOrder: [],

      totalCurrent: 0,

      tableData: [],

      multipleSelection: [],
    };
  },

  methods: {
    // 更新订单
    updateOrder(data){
      this.dialogFormVisible = false
      UpdateOrder(data)
      .then(()=>{
        this.getOrder({})
      })
    },
    
    // 获取order
    getOrder(data) {
      GetOrder(data).then((res) => {
        console.log(res.data);
        this.totalCurrent = res.data.pagnation.total;
        this.tableData = [...res.data.data];
      });
    },

    // 静态order方法
    getStaticInfo(item) {
      if (item !== "全部") {
        this.formInline.status = item;
        this.getOrder(this.formInline);
      } else {
        this.formInline.status = "";
        this.getOrder({});
      }
    },

    // 查询搜索
    onSubmit() {
      this.getOrder(this.formInline);
    },
    onReset() {
      this.current = 0;
      for (let i in this.formInline) {
        this.formInline[i] = "";
      }
      this.getOrder({});
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    currentChange(page) {
      this.getOrder({ current: page });
    },
  },
};
</script>

<style scoped>
.main {
  background-color: #fff;
}
.static {
  display: flex;
  font-size: 16px;
}
.static > div {
  padding: 5px 15px;
  border: 1px solid #e4e4e4;
  cursor: pointer;
}
.active {
  background-color: #7030a0;
  color: #fff;
}
.el-form {
  margin: 12px 12px;
}
.el-button {
  background-color: #7030a0;
  color: #fff;
}
.pagination {
  text-align: center;
}
a {
  color: #551a8b;
  text-decoration-line: none;
}
</style>